<template>
  <div>
    <el-form-item :prop="item.name || ''" :label="item.label" v-bind="item.formItemProps || {}" ref="el-form-item">
      <el-slider v-model="mvalue" v-bind="opt"></el-slider>
    </el-form-item>
  </div>
</template>

<script>
  import { objectAssign } from "../../utils/common";
  import Required from "../validMixins/Required";

  export default {
    name: "PopoSlider",
    props: {
      value: { type: [Array, String, Number] },
      item: { type: Object },
      formData: { type: Object },
    },
    mixins: [ Required],
    data() {
      return {
        mvalue: this.value,
        opt: {},
      };
    },
    watch: {
      mvalue(val) {
        this.$emit("input", val);
      },
    },
    created() {
      // console.log( "input", this);
      var opt = objectAssign(
        {
          min: 0,
          max: 100,
          step: 1,
          range: false,
        },
        this.item.props
      );

      opt.min = this.item.min !== undefined ? this.item.min : opt.min;
      opt.max = this.item.max !== undefined ? this.item.max : opt.max;
      opt.step = this.item.step !== undefined ? this.item.step : opt.step;
      opt.range = this.item.range !== undefined ? this.item.range : opt.range;

      this.opt = opt;

      if (opt.range && typeof this.mvalue == "string") {
        this.mvalue = this.mvalue.split(this.item.valueSplitChar || ",");
      }

      if (!opt.range && typeof this.mvalue == "string") {
        this.mvalue = this.mvalue * 1;
      }
    },
    methods: {},
  };
</script>
